<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>妖尾侧边栏</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .dis {
        width: 248px;
        height: 940px;
        background: red url(images/right-nav.png) no-repeat top -24px right;
        position: fixed;
        right: 0;
        top: 0;
        transition: all 1s ease;
    }

    .dis .btn {
        width: 46px;
        height: 128px;
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* 首行缩进 将文字 推走 */
        text-indent: -9999px;
    }

    .dis .close {
        background: url(images/sprite1.png) no-repeat -909px -670px;
        left: -12px;

    }

    .dis .open {
        background: url(images/sprite1.png) no-repeat -960px -670px;
        left: -12px;

    }
</style>

<body>
    <div class="dis">
        <a href="javascript:;" class="btn close">收起</a>

    </div>

    <script>
        var dis = document.getElementsByClassName('dis')[0]
        var btn = document.getElementsByClassName('btn')[0]

        var flag = 1;
        btn.addEventListener('click', function () {
            if (flag) {
                btn.classList.add('open');
                dis.style.width = '38px';
                flag = 0
            } else {
                btn.classList.remove('open');
                dis.style.width = '248px';
                flag = 1;
            }
        })

        //如何保证右侧图片和可视区域高度一样高    缩放比例
        function preload() {
            var scale = window.innerHeight / 940;
            console.log(scale);
            //  zoom 缩放
            dis.style.zoom = scale;
        }


        preload();
        window.onresize = function () {
            preload()
        }



    </script>
</body>

</html>